<template>
  <div style="height: 1000px;">
    测试页面
  </div>
  <img ref="target" src="" alt="">
  <!-- <img  src="https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""> -->
</template>

<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
const target = ref< null | HTMLImageElement>(null)
const {stop} = useIntersectionObserver(target, ([{isIntersecting}]) => {
  console.log(isIntersecting);
  if(isIntersecting){
    target.value!.src = "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
    stop()
  }

})
</script>

<style scoped>
</style>